<template>
  <el-scrollbar v-if="show" class="maxSize">
    <el-form ref="formRef" :rules="formRules" :model="form">
      <el-form-item label="题目内容" prop="content">
        <el-input v-model="form.content" placeholder="请输入题目内容" :disabled="disableEdit"></el-input>
      </el-form-item>

      <el-form-item label="题目类型" prop="type">
        <el-radio-group v-model="form.type" :disabled="disableEdit">
          <el-radio-button v-for="(item,index) in questionTypes" :key="index" :label="index">{{ item }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="题目答案" prop="answer">
        <!--不同的题型有不同的答案类型-->
        <!--选择题-->
        <ChoiceAnswer :answer-list="answerList" :disableEdit="disableEdit" @input="answerInput" v-if="form.type==0"
                      :count="4"></ChoiceAnswer>
        <!--多选题-->
        <ChoiceAnswer :answer-list="answerList" :disableEdit="disableEdit" @input="answerInput" v-if="form.type==1"
                      :count="4" checkbox
        ></ChoiceAnswer>
        <!--判断题-->
        <ChoiceAnswer :answer-list="answerList" :disableEdit="disableEdit" @input="answerInput" v-if="form.type==2"
                      :count="2" ture_or_false></ChoiceAnswer>
      </el-form-item>

      <el-form-item label="题目标签">
        <el-select filterable  multiple v-model="form.tags" :disabled="disableEdit" placeholder="请输入标签" allow-create>
          <el-option  v-for="item in allTag" :key="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="!disableEdit">
        <div style="display: flex;flex-direction: row;justify-content: center;width: 100%">
          <el-button  style="width: 39%" type="primary" @click="btnUpdateQuestion(formRef)">更新</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-scrollbar>
</template>

<script setup lang="ts">
import {inject, onMounted, PropType, reactive, ref, Ref} from "vue";
import {Question, QuestionAnswer, questionTypes, Tag, TempQuestionAnswer} from "../../types/mytypes";
import {FormInstance, FormRules} from "element-plus";
import ChoiceAnswer from "./ChoiceAnswer.vue";
import {QuestionRequest, TagRequest} from "../../request/MyRequset";
import index from "../../view/Index/Index.vue";

const formRef = ref<FormInstance>()
const emit = defineEmits(["error", "success","update"]);
const props = defineProps({
  disableEdit: Boolean,
  question: Object as PropType<Question>,
  updateMode: Boolean
})
let answerList = ref<QuestionAnswer[]>([]);
const form = reactive({
  content: '',
  type: 0,
  score: 0,
  answerList: [] as QuestionAnswer[],
  inputText: '',
  tags:[] as string[]
})
let show = ref(false)
const userId = inject('userId') as Ref<number>
//全部标签
let allTag = ref<Tag[]>([])

//====================FN====================

onMounted(async () => {
  if (props.disableEdit) {
    await initData();
  }
  allTag.value = (await TagRequest.getAll()).data
  show.value = true;
})

const initData = async () => {
  if (props.question == undefined) {
    console.warn("没有传入question");
    return;
  }
  form.type = props.question.type;
  form.content = props.question.content;
  answerList.value = (await QuestionRequest.getAllAnswer(props.question.id as number)).data;
  form.answerList = answerList.value
  form.inputText = answerList.value[0].answer;
}

const formRules = reactive<FormRules>({
  content: [
    {type: "string", required: true, message: "不能为空"}
  ],
  type: [
    {type: "number", required: true, message: "不能为空"}
  ],
})

const btnUpdateQuestion = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      //创建题目对象
      let question: Question = {
        id:props.question?.id,
        u_id:userId.value,
        content: form.content,
        type: form.type
      }
      //发送请求更新题目
      console.log(form.answerList)
      let updateRes = await QuestionRequest.updateQuestionWithAnswer(question, form.answerList, userId.value);
      //console.log(addQuestionRes);
      if (updateRes.suc) {
        emit("update")
      } else {
        error(updateRes.message);
      }
    }
  })
}

const error = (error: string) => {
  emit("error", error);
}
const success = (msg?: string) => {
  emit("success", msg);
}
const answerInput = (val: string | QuestionAnswer[]) => {
  if (form.type > 2) {
    form.answerList[0] = {
      answer: val as string,
      isRight: true,
    };
  } else {
    form.answerList = val as QuestionAnswer[];
  }
}
</script>

<style scoped lang="scss">
.maxSize {
  max-width: 40em;
}
</style>